import { CSSRuleObject, styled } from "styledfc";
import img from "./img";
import Header from "@/components/Header";
import Main from "@/components/Main";
import PetCard from "@/components/PetCard";
import { FlexCss } from "../../utils/styledfc";
import { PetCardType } from "../Index/components/HotList";
import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import { getCollectLog, getDataByType, getWeb, getDataLikeName } from "@/api";
import { toggleCollectFunc } from "@/utils/commonFunc";
import { useScrollBottom } from "@/hooks/useScrollBottom.ts";

export default function index() {
    const params = useParams() as { type: string; id: string };
    const [slot, setSlot] = useState({ type: "", id: "" });
    const [list, setList] = useState<PetCardType[]>([]);
    const bool = localStorage.getItem("pet-userInfo");
    const id = !!bool ? JSON.parse(bool).id : -1;
    const [isBottom] = useScrollBottom();
    const [page, setPage] = useState(1);
    useEffect(() => {
        if (isBottom) {
            if (params.type === "browse") return;
            const request = async () => {
                const res = params.type === "kind" ? await getDataByType(+params.id, page + 1, 10) : await getDataLikeName(params.id, page + 1);
                const { data } = res as { data: any };
                const arr = data.map((item: { [key in string]: any }): PetCardType => {
                    return {
                        englishName: item.pet_engName,
                        life: item.pet_life,
                        name: item.pet_name,
                        img: item.pet_coverURL,
                        collect: colIds.includes(item.id) ? true : false,
                        id: item.id,
                    };
                });
                setList((prev) => [...prev, ...arr]);
                setPage(page + 1);
            };
            request();
        }
    }, [isBottom]);
    const [colIds, setColIds] = useState<number[]>([]);

    useEffect(() => {
        setSlot(params);
        setPage(1);
        const resetData = async () => {
            const [{ data: colRes }, { data: dataRes }] = (await Promise.all([
                getCollectLog(id),
                params.type === "kind" ? getDataByType(+params.id, 1, 10) : params.type === "search" ? getDataLikeName(params.id, 1) : getWeb(id),
            ])) as { data: any }[];
            setColIds(colRes.map((item: { [key in string]: any }) => item.id));
            setList(
                dataRes.map((item: { [key in string]: any }): PetCardType => {
                    return {
                        englishName: item.pet_engName,
                        life: item.pet_life,
                        name: item.pet_name,
                        img: item.pet_coverURL,
                        collect: colIds.includes(item.id) ? true : false,
                        id: item.id,
                    };
                })
            );
        };
        resetData();
    }, [params]);

    const changeCollect = async (did: number) => {
        await toggleCollectFunc(id, did, setList, list);
    };
    return (
        <div className={indexStyle.className}>
            <Header back={true} h2={slot.type === "kind" ? "Kind your" : "Web for"} h1={slot.type === "kind" ? "Friend" : "You"} img={slot.type === "kind" ? img.kindHeader : img.browseHeader} />
            <Main paddingBottom="23rem">
                <ul>
                    {list.map((item) => (
                        <PetCard changeCollect={changeCollect} key={item.id} item={item}></PetCard>
                    ))}
                </ul>
            </Main>
        </div>
    );
}
const indexStyle = styled({
    fontSize: "16rem",
    backgroundColor: "#a1b275",
    "& ul": {
        paddingTop: "30rem",
        minHeight: "calc( 100vh - 203rem)",
        ...(FlexCss("center", "flex-start", "column") as CSSRuleObject),
    },
});
